import { useState, useEffect, useReducer, useRef, useCallback, useMemo } from 'react'
import './index.less'
import Header from './Header'
import ItemList from './ItemList'
import Modal from './Modal'
import { useSelector } from 'react-redux';

export default function TodoListWithRedux() {
  const { todoList } = useSelector((state) => state.todoList)
  // 持久化到localStorage
  useEffect(() => {
    console.log('useEffect 触发了')
    localStorage.setItem('todoListWithRedux', JSON.stringify(todoList))
  }, [todoList])
  return (
    <div className="todoListWithRedux">
      <div className="wrap">
        <Header></Header>
        <ItemList></ItemList>
        <Modal></Modal>
      </div>
    </div>
  )
}
